<template>
  <div class="nav-details" >
   
  <BannerPage v-if="item.type === 'uiBanner'" :item="item"></BannerPage>
    
    <SmallCard v-if=" item.type==='uiMiddleCard'" :item="item"></SmallCard>
    
    <BigCard  v-else-if=" item.type==='uiBigCard'"></BigCard>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex"
import BannerPage from "@/components/BannerPage.vue";
import SmallCard from '@/components/SmallCard.vue'
import BigCard from '@/components/BigCard.vue'
export default {

props:["item"],
components: {
    
 BannerPage,
    SmallCard,
    BigCard
  },
  methods: {
      ...mapMutations(['updataItem'])
  },
  created:function(){
      this.updataItem({stateitem:this.item})
  },
  computed:mapState(["stateitem"])
}
</script>

<style lang="less" scoped>
.nav-details{
padding: 5px;

}
</style>